<template>
  <div class='box'>
<div class="left-box">
  <img :src="`http://liufusong.top:8080${item.houseImg}`" alt="">
</div>
<div class="right-box">
  <h3>{{item.title}}</h3>
  <p class="xi">{{item.desc}}</p>
  <div class='add'>{{item.tags[0]}}</div>
  <div class='price'>{{item.price}}
    <p class='sort'>元/月</p>
  </div>
</div>
  </div>
</template>

<script>
export default {
  name: 'MyHouse',
  props: ['item']
}
</script>

<style lang='less' scoped>
.box{
  width: 100%;
  height: 100px;
    border-bottom: 1px solid #e5e5e5;
  .left-box{
    width: 100px;
    height: 100px;
    float: left;
line-height: 100px;
img{
  width: 100%;
  height: 100%;
}
  }
  .right-box{
    margin-left: 20px;
    float: left;
    h3{
      margin: 0;
    }
    p{
      margin: 0;
    }
    .xi{
      transform: scale(0.8);
      margin-left: -20px
    }
    .sort{
      display: inline-block;
    }
    .add{
    color: #39becd;
    background: #e1f5f8;
    width: 50px;
    }
  }
  .price{
    color: red;
    float:left
    .sort{
      font-size: 12px;
      float:left,
    }
  }
}
</style>
